<template>
  <div
    class="map-top d-flex ai-c f-14 t-nowrap c-pointer p-r-tiny"
    v-show="visible"
  >
    <div class="m-t-left">
      圈画操作
    </div>
    <div class="util-line flex-between ai-c ta-c" />
    <div
      class="util d-flex ai-c"
      style="margin-left: 0;"
      @click="$emit('redraw')"
    >
      <img
        src="./images/redraw.png"
        class="img"
      >
      <span>重画</span>
    </div>
    <div
      class="util d-flex ai-c"
      @click="$emit('undo')"
      title="快捷键：ctrl+z"
    >
      <img
        src="./images/redraw.png"
        class="img"
      >
      <span>撤销</span>
    </div>
    <div
      class="util d-flex ai-c"
      @click="$emit('finishDraw')"
      v-if="isGlobal"
    >
      <img
        src="./images/finish.png"
        class="img"
      >
      <span>完成圈画</span>
    </div>

    <div
      class="util d-flex ai-c"
      @click="$emit('close')"
      v-if="isGlobal"
    >
      <img
        src="./images/close.png"
        class="img"
      >
      <span>关闭</span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    isGlobal: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style lang="scss" scoped>
.map-top {
  position: absolute;
  top: 30px;
  left: 50%;
  color: #fff;
  z-index: 1;
  height: 34px;
  background: #ffffffe6;
  border-radius: 6px;
  transform: translate(-50%, -50%);

  .m-t-left {
    border-right: 1px solid #b7b9bb;
    height: 30px;
    line-height: 30px;
    position: relative;
    padding: 0 8px;
    color: #424e61;
  }

  .m-t-left::before {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(50%, -50%) rotate(45deg);
    content: "";
    display: table;
    width: 0;
    height: 0;
    border: 3px solid;
    border-color: #737474 #737474 transparent transparent;
  }

  .util-line {
    height: 24px;
    background: #86bbe2;
    border-radius: 4px;
    margin: 0 8px;

    .txt {
      margin: 0 8px;
    }
  }

  .util {
    padding: 0 6px;
    height: 24px;
    background: #0243c8;
    border-radius: 4px;
    color: #ffffffde;
    margin-left: 8px;

    .img {
      width: 16px;
      height: 15px;
      margin-right: 6px;
    }
  }

  .util:hover {
    color: #fff;
  }

  .util:nth-child(3) {
    background-color: #1f8cee;
  }

  // .util:nth-child(4) {
  //   background-color: #1f8cee;
  // }

  .util:nth-child(5) {
    background-color: #009d00;
  }

  .util:nth-child(6) {
    background-color: #fb8918;
  }
}
</style>
